<template>
	<view class="order-item" @click="goDetail">
		<view class="order-item-content">
			<view class="title-wrap">{{item.type===0? '个人': '公司'}}定制</view>	
			<view class="detail">
				<labelValue :value="customInfo" notColon/>	
				<labelValue label="提交时间" :value="item.createTime" />
			</view>	
			<view class="bottom-wrap">
				<!-- 状态 -->
        <text v-if="item.status === ORDER_STATUS_SUBMIT" class="order-status active">已提交</text>
        <text v-if="item.status === ORDER_STATUS_CANCELED" class="order-status">已取消</text>
        <!-- 按钮 -->
        <basic-button v-if="item.status === ORDER_STATUS_SUBMIT" type="plain" width="172rpx" height="60rpx" border @click="$emit('click:cancel')">取消</basic-button>
			</view>	
		</view>
	</view>
</template>
<script>
import labelValue from '../../../components/label-value'
import pay from '@/mixins/pay'
import sdk from 'sdk'

export default {
	name: '',
	mixins: [pay],

	components: { labelValue },
	
	props: {
		item: { type: Object, default:()=>({}) }
	},
	data(){
		return {
      ORDER_STATUS_SUBMIT: 0, // 订单状态-已提交
      ORDER_STATUS_CANCELED: 1, // 订单状态-已取消
		}
	},
	computed: {
		customInfo() {
			return `${this.item.departure}-${this.item.destination}-${this.item.days}天定制游`
		}
	},

	methods: {
		handleClick(event) {
			this.$emit('click', event)
		},

		goDetail(){
			sdk.navigateTo({
				url: `/packageOrder/pages/custom-detail/index?code=${this.item.id }`
			})
		}
	}
}
</script>
<style lang="less">
.order-item{
	position: relative;
	width: 100%;
	margin-bottom: @page_horizonal_margin;
	background: #fff;
	display: flex;
	flex-direction: column;
	border-radius: 16rpx;
	.order-item-header{
		width: 100%;
		height: 90rpx;
	    background: #FBFCFE;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 32rpx;
		box-sizing: border-box;
		.order-item-type{
			.flex-normal-center;
			font-size: 28rpx;
			color: #1B2431;
			.image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
		.order-item-status{
			.flex-normal-center;
			color: #8D98AF;
			font-size: 24rpx;
		}
	}
	.order-item-content{
		flex: 1;
		padding: 34rpx 34rpx 0;
		.title-wrap{
			display: flex;
			justify-content: space-between;
			color: #1B2431;
			font-size: 28rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}
		.bottom-wrap{
      .flex;
      .flex-between;
      .flex-middle;

      height: 92rpx;
      margin-top: 32rpx;	
      border-top: 1rpx solid #FAFAFA;

      .order-status {
        .flex-1;

        color: @font_light_color;
        font-size: 24rpx;

        &.active {
          color: @theme_color;
        }
      }
		}
	}
}
</style>